<template>
    <div class="page">
        <div class="page">
            <!--顶部-->
            <div class="top">
                <div class="back"><img src="../../../assets/images/home/goods/back.png" /></div>
                <div class="cartTitle">购物车</div>
            </div>
            <!--商品-->
            <div class="goods">
                <div :class="{'left':left,active:active}" @click="check()"></div>
                <div class="middle">
                    <div class="image"><img src="//vueshop.glbuys.com/uploadfiles/1524556213.jpg" alt="老爹鞋女韩版ulzzang原宿百搭网鞋透气网面内增高运动鞋网鞋夏季"></div>
                    <div class="delete">删除</div>
                </div>
                <div class="right">
                    <div class="goods-detail">
                        <div class="goods-title">
                            老芳鞋女辅版ulzzang原宿百格网球透气网面内增高运动鞋网鞋夏手
                        </div>
                        <div class="goods-attribute">
                            <div class="goods-color">颜色：蓝白色</div>
                            <div class="goods-size">尺码：37</div>
                        </div>
                    </div>
                    <div class="goods-control">
                        <div class="price">￥255</div>
                        <div class="num">
                            <div class="dec">-</div>
                            3
                            <div class="add">+</div>
                        </div>
                    </div>
                </div>
            </div>

            <!--结算-->
            <div class="count">
                <div class="left">
                    <div class="allcheck"></div>
                    <div class="text">全选</div>
                </div>
                <div class="right">
                    <div class="sum">合计：0</div>
                    <div class="pay"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "cart",
        data(){
            return{
                left:true,
                active: false
            }
        },
        methods:{
            check(){
                this.left = !this.left;
                this.active = !this.active
            }
        }
    }
</script>

<style scoped>
    .page{width:100%;height:2000px;}
    /*<!--上部-->*/
    .top{width: 100%; height: 1.02rem; background-color: #ffffff; display:flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid #EFEFEF}
    .top .back{width: 15%; height: 0.8rem; }
    .top .back img {width: 100%; height: 100%}
    .top .cartTitle{width: 85%; height: 1rem; text-align: center; line-height: 1rem; font-size: 0.3rem }
    /*中部：商品*/
    .goods{width: 100%; height: 2.2rem; background-color: #ffffff; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.2rem}
    .goods .left {width: 0.4rem; height: 0.4rem; border: 1px solid gainsboro; margin-left: 0.2rem; border-radius: 1rem; box-sizing: border-box}
    .goods .active{width: 0.4rem; height: 0.4rem; margin-left: 0.2rem; background-repeat: no-repeat; background-size: 100%; background-image: url("../../../assets/images/home/cart/checkmark.png")}
    .goods .middle{width: 20%; height: 100%; display:flex; flex-direction: column; align-items: center; justify-content: space-between }
    .goods .middle .image {width: 1.2rem; height: 1.2rem;  margin-top: 0.2rem}
    .goods .middle .image img{width: 100%;  height: 100%}
    .goods .middle .delete {width: 100%; height: 0.8rem; text-align: center; line-height: 0.8rem;  font-size: 0.28rem; color: #b5b5b5}
    .goods .right{width: 65%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center}
    .goods .right .goods-detail{width: 100%; height: 60%; font-size: 0.26rem; margin-top: 0.1rem}
    .goods .right .goods-detail .goods-attribute {display: flex; margin-top: 0.2rem}
    .goods .right .goods-detail .goods-attribute .goods-color{margin-right: 0.2rem}
    .goods .right .goods-control {width: 100%; height: 25%; font-size: 0.28rem; display: flex; justify-content: space-between; align-items: center}
    .goods .right .goods-control .price{font-size: 0.3rem; color: #cc0004}
    .goods .right .goods-control .num{width: 2rem; height: 0.54rem;  display: flex; justify-content: space-around; margin-right: 0.2rem; align-items: center;
            border: 1px solid #000000;  border-radius: 0.2rem}
    .goods .right .goods-control .num .dec{width: 20%; border-right: 1px solid black; text-align: center}
    .goods .right .goods-control .num .add{width: 20%; border-left: 1px solid black; text-align: center}
    /*底部：结算*/
    .count{width: 100%;  height: 1.02rem; background-color: #ffffff; position: fixed; bottom: 1.2rem;
            display: flex; justify-content: space-between; align-items: center}
    .count .left{width: 20%; height: 60%; display: flex; align-items: center}
    .count .left .allcheck{width: 0.4rem; height: 0.4rem; border: 1px solid gainsboro; margin-left: 0.2rem; border-radius: 1rem; box-sizing: border-box; margin-right: 0.1rem}
    .count .left .text{font-size: 0.28rem}
    .count .right{width: 30%; height: 100% ; display: flex; justify-content: space-between; align-items: center}

</style>